<template>
	<view>
		<u-navbar title="添加商品規格" placeholder autoBack>
			<view class="flexright xiaohui" slot="right" @click="addSku">新增</view>
		</u-navbar>
		<view style="padding-bottom: 150rpx;">
			<view class="mainpadding_top ffffff" v-for="(item,index) in skuList" :key="index">
				<view class="flexbetween">
					<view class="titletext hei_text bold">規格標題</view>
					<view @click="delSku(item,index)">
						<u-icon name="trash" color="#ff0000" size="18"></u-icon>
					</view>
				</view>
				<view class="bghui mainpadding_top radius">
					<input type="text" class="hui_text main_size bold" placeholder="請輸入規格標" v-model="item.name">
				</view>
				<view class="flexbetween margin_top">
					<view class="titletext hei_text bold">選擇分類</view>
					<!-- <u-icon name="trash" color="#ff0000" size="18"></u-icon> -->
				</view>
				<view class="flexbetween bghui mainpadding_top radius" @click="jumpurl(index)">
					<input type="text" class="hei_text main_size bold" placeholder="請選擇分類" v-if="!item.shopclassify_id">
					<view class="hei_text main_size bold" v-else>{{item.shopclassify_name}}</view>
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view>
			<view class="mainpadding posibottom" style="bottom: 0;">
				<view class="submitbtn" @click="confirm">確認</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				skuList: [{
					id: "", //规格id
					name: "", //规格标题
					shopclassify_name: "", //分类名称
					shopclassify_id: "", //分类id
				}],
				selectIndex: "", //当前点击的规格索引
				skuId: [], //商品规格1id
				goods_id: "", //商品id
			}
		},
		onLoad(options) {
			if(options.id){
				this.goods_id = options.id
				this.getSkuList()
			}
		},
		onShow() {
			uni.$off("selectCate")
			uni.$on("selectCate", data => {
				console.log(data);
				let arr = []
				let arrId = []
				data.forEach(item => {
					arrId.push(item.id)
					arr.push(item.name)
				})
				this.skuList[this.selectIndex].shopclassify_id = arrId.join(",")
				this.skuList[this.selectIndex].shopclassify_name = arr.join(",")
			})
		},
		methods: {
			async getSkuList() {
				let _this = this
				let res = await this.http.request('/api/goods/deailSku', 'POST', {
					goods_id: this.goods_id
				})
				if (res.code == 1) {
					this.skuList = res.data
					this.skuList.forEach(item=>{
						this.skuId.push(item.id)
					})
				} else if (res.code == 0) {
					// this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			addSku() {
				this.skuList.push({
					id: "", //规格id
					name: "", //规格标题
					shopclassify_name: "", //分类名称
					shopclassify_id: "", //分类id
				})
			},
			delSku(item, index) { //刪除规格
				this.skuList.splice(index, 1)
				if (!item.id) {
					return false
				}
				this.getDelSku(item.id)
			},
			async getDelSku(id) {
				let res = await this.http.request("/api/goods/delSku", 'POST', {
					id
				})
				if (res.code == 1) {
					this.http.toast("刪除成功！")
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			jumpurl(index) {
				this.selectIndex = index
				uni.navigateTo({
					url: "/pages/workbench/fenleigl?type=1"
				})
			},
			confirm() {
				let flag = false;
				this.skuList.forEach(item => {
					if (!item.name || !item.shopclassify_id) {
						flag = true
					}
				})
				if (flag) {
					this.http.toast("請將商品規格資訊補充完整！")
					return false
				}
				this.skuList.forEach((item, index) => {
					this.addSkuGet(item.id, item.name, item.shopclassify_id, item.shopclassify_name, index)
				})
			},
			async addSkuGet(id, name, shopclassify_id, shopclassify_name, index) {
				let res = await this.http.request("/api/goods/addSku", 'POST', {
					is_dan:this.goods_id?0:1,
					id: id, //规格id
					name: name, //规格标题
					shopclassify_id: shopclassify_id, //分类id
					shopclassify_name: shopclassify_name
				})
				if (res.code == 1) {
					if(res.data!==1){
						this.skuId.push(Number(res.data))
					}
					if (index == this.skuList.length - 1) {
						this.submit()
					}
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			async submit() { //確認
				this.http.toast("添加成功！")
				uni.$emit("selectSku", this.skuId)
				setTimeout(() => {
					uni.navigateBack(1)
				}, 500)
			}
		}
	}
</script>

<style>

</style>